<template>
  <div class="header animate__animated animate__slideInDown">
    <div class="header_item">
      <a
        href="javascript:;"
        @click="getBackUri"
        class="iconfont icon-arrow-left-bold goback"
        v-show="$route.meta.back"
        >{{ $t('lang["Back"]') }}</a
      >
    </div>
    <div class="header_item">
      {{ $route.meta.title ? $t('lang["' + $route.meta.title + '"]') : "" }}
    </div>
    <div class="header_item">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "Header",
  props: {},
  data() {
    return {};
  },
  methods: {
    getBackUri() {
      let uri = this.$route.path;
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less">
.header {
  display: flex;
  align-items: center;
  align-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  box-shadow: #cccccc 5px 2px 5px;
  height: 60px;
  z-index: 9999;
  .header_item {
    width: 99%;
    font-weight: 700;
    a {
      &.goback {
        color: #bf3779;
        font-size: 13px;
        display: block;
        line-height: 60px;
      }
    }
    &:first-child {
      width: 100px;
      padding: 0 16px;
      a {
        text-align: left;
      }
    }
    &:last-child {
      width: 100px;
      padding: 0 16px;
      a {
        text-align: right;
        display: block;
      }
    }
  }
}
</style>
